<template>
	<view class="container">

		<view class="duration" @tap="showDurationPicker">
			<text>延長時間：</text>
			<view class="inp" :class="{declass:value==='請選擇延長時間'}">{{value}}</view>
		</view>
		<u-picker confirmText="確認" :columns="durationList" @confirm="confirmDuration" @cancel="showDurationPopup=false"
			@close="showDurationPopup=false" :closeOnClickOverlay="true" :show="showDurationPopup"></u-picker>

		<view class="duration" @tap="openTicket">
			<text>使用電子票券：</text>
			<view class="inp" :class="{declass:ticketText==='選擇電子票券'}">{{ticketText}}</view>
		</view>

		<view class="duration" @tap="showSelectCoupon">
			<text>優惠券：</text>
			<view class="inp" :class="{declass:value1==='選擇優惠券'}">{{value1}}</view>
		</view>
		<u-popup round="16" :show="showCouponPopup" @close="showCouponPopup=false" :closeOnClickOverlay="true">
			<scroll-view class="scroll_y" scroll-y="true" @scrolltolower="scroll">
				<view class="" v-if="couponList.length">
					<view class="popup_item" :class="{active:info.id==item.id}" @tap="select_coupon(item.id,item)"
						v-for="item in couponList" :key="item.id">
						<view class="list_left">
							<view class="top">
								<view class="coupon">{{item.title}}</view>
								<view class="condition">滿{{item.min}}可用</view>
							</view>
							<view class="bottom">
								<view class="number">${{item.money}}</view>
								<view class="time">有效期至{{effectiveTime(item.expire_time*1000)}}</view>
							</view>
						</view>
						<view class="list_right">
							<view>去使用</view>
						</view>
					</view>
				</view>
				<view style="text-align: center;" v-else>暫無優惠券</view>

			</scroll-view>
		</u-popup>

		<view class="select_package_title">
			<text>點選優惠套餐</text>
			<image src="@/static/images/jiantou_xiangxia.png" mode="widthFix"></image>
		</view>
		<view class="select_package" v-if="roomInfo.package_list?roomInfo.package_list.length:false">
			<view class="select_package_item" @click="selectPackage(item)"
				:class="{ active: packageInfo && packageInfo.id == item.id }"
				v-for="(item, index) in roomInfo.package_list" :key="item.id">
				<text>{{ item.duration_hour }}小時</text>
				<text>現價${{ Math.floor(item.price) }}</text>
			</view>
		</view>

		<view class="price">
			<view class="">支付金額：<text>${{totalPrice || 0}}</text></view>
			<view v-if="storeInfo && userStoreInfo.user_level" class="">
				會員折扣：<text>{{setVipRate(storeInfo.vip_rate)}}</text></view>
		</view>

		<view class="pay_type">
			<view class="title">選擇付款方式</view>
			<radio-group @change="radioChange" class="radio_box">
				<label v-for="(item,index) in paymentMethod" :key="index" v-if="index !== 1">
					<view class="label" :class="{active:radioChecked==item.value}">{{item.value}}

					</view>
					<radio :value="item.value" :checked="currentCheck==index" color="#39B19D" />
				</label>

				<view class="balance" v-if="radioChecked=='餘額付款'">（餘額<text
						style="margin-left: 15rpx;color: #FA533D;">{{userStoreInfo.balance}}</text>）</view>

				<view @tap="showCardPopup = true" class="card_text" v-if="radioChecked=='儲值卡付款'">
					<text>{{selectCardText}}</text>
					<text style="margin-left: 30rpx;"
						v-if="rechargeCardInfo">餘額{{rechargeCardInfo.remaining_money}}</text>
				</view>

				<view class="ticket" v-if="radioChecked === '使用電子票券'">
					<!-- <view class="ticket_text">{{ticketText}}</view> -->
					<view class="ticket_text_inp" :class="{active:ticketInfo.id}" @tap="openTicket">{{ticketText}}
					</view>
				</view>
			</radio-group>

			<u-popup :show="showCardPopup" @close="showCardPopup=false" :closeOnClickOverlay="true" round="16">
				<scroll-view scroll-y="true" class="card_popup_box">
					<view class="" v-if="rechargeCardList.length">
						<view class="card_item" :class="{active:rechargeCardInfo?rechargeCardInfo.id==item.id:false}"
							@tap="selectCard(item)" v-for="item in rechargeCardList" :key="item.id">
							<view class="title">
								<view class="card_name">{{item.title}}</view>
								<view class="end_time">有效期至{{convertTime(item.expire_time*1000)}}</view>
							</view>
							<view class="card_balance">餘額 <text>{{item.remaining_money}}</text> </view>
						</view>
					</view>
					<view v-else style="text-align: center;">暫無儲值卡</view>
				</scroll-view>
			</u-popup>

			<u-popup :show="showTicket" @close="showTicket=false" :closeOnClickOverlay="true" round="16">
				<scroll-view scroll-y="true" class="card_popup_box">
					<view class="" v-if="ticketList.length">
						<view class="card_item" :class="{active:ticketInfo.id?ticketInfo.id==item.id:false}"
							@tap="selectTicket(item)" v-if="item.remaining_times > 0" v-for="item in ticketList"
							:key="item.id">
							<view class="title">
								<view class="card_name">{{item.title}}</view>
								<view class="end_time">有效期至{{convertTime(item.expire_time*1000)}}</view>
							</view>
							<view class="card_balance">
								<view class="">剩餘次數 <text>{{item.remaining_times}}</text> </view>
								<view class="">使用時長 <text>{{item.use_hours}}</text> </view>
							</view>
						</view>
					</view>
					<view v-else style="text-align: center;">暫無電子票券</view>
				</scroll-view>
			</u-popup>
		</view>

		<view class="confirm_payment" @tap="confirm_payment">確定支付</view>

		<u-popup :show="show" mode="center" round="16" @close="show=false" :closeOnClickOverlay="true">
			<view class="extends_succes">
				<view class="title">續單成功</view>
				<view class="extend_time">已成功續單：{{value}}</view>
				<view class="extend_time">訂單結束時間：</view>
				<view class="extend_time">{{today}} {{orderExtendStartTime}}-{{orderExtendEndTime}}</view>
				<view class="">
					<button @click="back">確定</button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		getStoreInfo,
		getUserCouponAll,
		getUserStoreInfo
	} from '@/api/me.js'
	import {
		getRoomInfo,
	} from '@/api/index.js'
	import {
		orderContinuation,
		extendUserTicket,
		getLinePayInfo
	} from '@/api/order.js'

	import dayjs from 'dayjs'
	import store from "@/store/index.js"

	export default {
		data() {
			return {
				orderInfo: null, // 訂單詳情
				storeInfo: null,
				durationList: [],
				showDurationPopup: false,
				value: '請選擇延長時間',
				showCouponPopup: false,
				value1: '選擇優惠券',
				couponList: [],
				info: {},
				roomInfo: '',
				today: '',
				totalPrice: 0,
				price: '',
				paymentMethod: [{
						value: "餘額付款",
						checked: false
					},
					{
						value: '使用電子票券',
						checked: false
					}
				],
				currentCheck: 0,
				radioChecked: "",
				userStoreInfo: {},
				rechargeCardInfo: null,
				showCardPopup: false,
				selectCardText: '選擇儲值卡',
				rechargeCardList: [],
				show: false,
				orderExtendEndTime: '',
				orderExtendStartTime: '',
				ticketText: '選擇電子票券',
				showTicket: false,
				ticketList: [],
				ticketInfo: {
					id: null
				},
				isLinePay: { // 判断是否唤醒linepay 支付
					flag: false,
					info: null,
				},
				systemInfo: {},
				packageInfo: null,
				extendDuration: '',
			};
		},
		onLoad(option) {
			// console.log(store.state.orderInfo)

			// this.orderInfo = JSON.parse(option.orderInfo)
			// console.log(this.orderInfo, '訂單信息')

			if (process.env.NODE_ENV == 'development') {
				// H5
				this.win = 'H5'
			} else if (process.env.NODE_ENV == 'production') {
				// APP
				this.win = 'APP'

				this.systemInfo = uni.getSystemInfoSync()
			}

			this.orderInfo = store.state.orderInfo

			this.radioChecked = this.paymentMethod[0].value
			getStoreInfo({
				store_id: this.orderInfo.store_id
			}).then(res => {
				this.storeInfo = res.data
				// console.log(res.data, '店鋪詳情')
			}).then(() => {
				getRoomInfo({
					room_id: this.orderInfo.room_id,
					date: this.today
				}).then(res => {
					// console.log(res.data, '包廂信息')
					this.roomInfo = res.data
				})
			}).then(() => {
				getUserStoreInfo({
					store_id: this.storeInfo.id
				}).then(res => {
					// console.log(res.data, '賬戶信息')
					this.userStoreInfo = res.data
					this.rechargeCardList = res.data.recharge_card

					this.setPayment(res.data.pay_type_list)
					if (this.userStoreInfo.user_level) {
						// if (this.storeInfo.vip_rate !== 0) {
						// 	this.totalPrice = this.roomInfo.price * this.storeInfo.vip_rate / 10
						// } else {
						// 	this.totalPrice = this.roomInfo.price
						// }
						this.totalPrice = Number(this.roomInfo.price)

					} else {
						this.totalPrice = Number(this.roomInfo.price)

					}
				})
			})


			getUserCouponAll({
				room_id: this.orderInfo.room_id
			}).then(res => {
				this.couponList = res.data
			})

			// console.log(dayjs().year(), dayjs().month(), dayjs().date())
			this.today = dayjs().year() + '-' + (dayjs().month() + 1) + '-' + dayjs().date()
		},
		onShow() {
			this.linePayFn()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			showDurationPicker() {
				this.showDurationPopup = true
				this.setExtendDuration(this.storeInfo.store_config.order_continuation_min, this.storeInfo.store_config
					.order_continuation_max)
			},
			setExtendDuration(min, max) {
				console.log(min, max)
				min = min ? min : '0:30'
				let minTime = this.timeStamp(min)
				let maxTime = this.timeStamp(max) == 0 ? 24 * 60 * 60 * 1000 : this.timeStamp(max)

				let arr = []
				for (var i = minTime; i <= maxTime; i += minTime) {
					arr.push(i)
				}
				let arr1 = arr.map(item => this.stampTime(item))
				this.durationList = [
					[...arr1]
				]
			},
			timeStamp(time) {
				console.log(time, '延長時間')
				if (time.indexOf(':') !== -1) {
					let h = Number(time.split(":")[0])
					let m = Number(time.split(":")[1])
					return h * 60 * 60 * 1000 + m * 60 * 1000
				} else {
					return 0
				}

			},
			stampTime(num) {
				let h = Math.floor(num / 60 / 60 / 1000)
				let m = Math.floor((num % (60 * 60 * 1000)) / 60 / 1000)
				if (m > 0) {
					return h + '小時' + m + '分鐘'
				} else {
					return h + '小時'
				}
			},
			confirmDuration(e) {
				if (this.radioChecked != '使用電子票券') {
					this.value = e.value[0]
					if (e.value[0].indexOf('分鐘') == -1) {
						let h = e.value[0].split('小時')[0]
						this.extendDuration = h + ':00'
						this.computedPrice(h)
					} else {
						let h = e.value[0].split('小時')[0]
						let m = e.value[0].split('小時')[1].split('分鐘')[0]
						this.extendDuration = h + ':' + m
						this.computedPrice(h, m)
					}
				} else {
					uni.showToast({
						title: '當前已選擇電子票券',
						icon: 'none',
						duration: 2000
					})
				}

				this.showDurationPopup = false
			},
			extend_order() {
				uni.navigateTo({
					url: `/pages/order_details/extend_order/extend_order?orderInfo=${JSON.stringify(this.orderInfo)}`
				})
			},
			effectiveTime(num) {
				let time = new Date(num)
				let y = time.getFullYear()
				let m = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : "0" + (time.getMonth() + 1)
				let d = time.getDate() >= 10 ? time.getDate() : "0" + (time.getDate())
				return y + "/" + m + "/" + d
			},
			showSelectCoupon() {
				if (this.value !== "") {
					if (this.ticketInfo.id) {
						uni.showToast({
							title: '當前續單方式不支持使用優惠券',
							icon: 'none'
						})
					} else {
						this.showCouponPopup = true
					}
				} else {
					uni.showToast({
						title: '請先選擇時長',
						icon: 'none'
					})
				}
			},
			select_coupon(id, item) {
				if (Number(item.min) <= this.totalPrice) {
					if (id == this.info.id) {
						this.info = {}
						this.totalPrice = this.price
						this.value1 = '選擇優惠券'
					} else {
						this.info = item
						this.showCouponPopup = false
						// console.log(item)
						this.value1 = item.title
						this.totalPrice = (this.price - Number(item.money))
					}
				} else {
					uni.showToast({
						title: '該優惠券不滿足使用條件',
						icon: 'none'
					})
				}
			},
			computedPrice(h, m) {
				if (this.userStoreInfo.user_level) {
					if (m) {
						// this.totalPrice = (Number(h) * this.roomInfo.price + (this.roomInfo.price / 60 * Number(m))).toFixed(2)
						this.totalPrice = this.storeInfo.vip_rate == 0 ? (Number(h) * this.roomInfo.price + (this.roomInfo
							.price / 60 * Number(m))) : ((Number(h) * this.roomInfo.price + (this.roomInfo
							.price / 60 * Number(m)))) * this.storeInfo.vip_rate / 10
					} else {
						this.totalPrice = this.storeInfo.vip_rate == 0 ? (Number(h) * this.roomInfo.price) : ((
							Number(h) * this.roomInfo.price)) * this.storeInfo.vip_rate / 10
					}
				} else {
					if (m) {
						// this.totalPrice = (Number(h) * this.roomInfo.price + (this.roomInfo.price / 60 * Number(m))).toFixed(2)
						this.totalPrice = (Number(h) * this.roomInfo.price + (this.roomInfo
							.price / 60 * Number(m)))
					} else {
						this.totalPrice = (Number(h) * this.roomInfo.price)
					}
				}

				this.price = this.totalPrice
			},
			radioChange(e) {
				if (this.ticketInfo.id) {
					this.value = '請選擇延長時間'
				}

				this.radioChecked = e.detail.value

				this.ticketInfo = {
					id: null
				}
				this.ticketText = this.ticketInfo.id ? this.ticketInfo.title : '選擇電子票券'

				this.paymentMethod.forEach((item, index) => {
					if (item.value == this.radioChecked) {
						this.currentCheck = index
						// console.log(index,"1111")
					}
				})

				if (this.radioChecked == '餘額付款' || this.radioChecked == '儲值卡付款') {
					getUserStoreInfo({
						store_id: this.storeInfo.id
					}).then(res => {
						// console.log(res.data, '賬戶信息')
						this.userStoreInfo = res.data
						this.rechargeCardList = res.data.recharge_card
					})
				}

			},
			convertTime(num) {
				let time = new Date(num)
				let y = time.getFullYear()
				let m = this.montage(time.getMonth() + 1)
				let d = this.montage(time.getDate())
				return y + '/' + m + '/' + d
			},
			selectCard(item) {
				if (this.rechargeCardInfo) {
					if (this.rechargeCardInfo.id == item.id) {
						this.rechargeCardInfo = null
					} else {
						this.rechargeCardInfo = item
						this.showCardPopup = false
					}
				} else {
					this.rechargeCardInfo = item
					this.showCardPopup = false
				}

				this.selectCardText = this.rechargeCardInfo ? this.rechargeCardInfo.title : '選擇儲值卡'


			},
			montage(num) {
				return num >= 10 ? num : '0' + num
			},
			confirm_payment() {

				if (!this.extendDuration) {
					uni.showToast({
						title: '請選擇續單時間',
						icon: 'none'
					})
					return
				}

				let payType = ''
				switch (this.radioChecked) {
					case '信用卡/轉帳 藍新':
						payType = 1;
						break;
					case '信用卡/轉帳 綠界':
						payType = 2;
						break;
					case 'Line Pay':
						payType = 4;
						break;
					case '餘額付款':
						payType = 6;
						break;
					case '儲值卡付款':
						payType = 7;
						break;
					case '使用電子票券':
						payType = 8
						break;
					case 'Apple pay':
						payType = 9
						break;

				}

				switch (payType) {
					case 1:
						this.confirm_payment1();
						break;
					case 2:
						this.confirm_payment2();
						break;
					case 4:
						this.confirm_payment4();
						break;
					case 6:
						this.confirm_payment6();
						break;
					case 7:
						this.confirm_payment7();
						break;
					case 8:
						this.confirm_payment8();
						break;
					case 9:
						this.confirm_payment9();
						break;
				}
			},
			confirm_payment1() {
				orderContinuation({
					order_id: this.orderInfo.id,
					order_continuation: this.extendDuration,
					pay_type: 1,
					coupon_id: this.info.id ? this.info.id : '',
					money: this.totalPrice,
					package_id: this.packageInfo ? this.packageInfo.id : ''
				}).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: `/pages/book_now/outward_payment/outward_payment?payData=${JSON.stringify(res.data)}&type=1`
						})

						this.show = true
						this.extendEndTime()

						setTimeout(() => {
							this.show = false
							uni.navigateBack()
						}, 5000)

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			confirm_payment2() {
				orderContinuation({
					order_id: this.orderInfo.id,
					order_continuation: this.extendDuration,
					pay_type: 2,
					coupon_id: this.info.id ? this.info.id : '',
					money: this.totalPrice,
					package_id: this.packageInfo ? this.packageInfo.id : ''
				}).then(res => {
					if (res.code == 1) {
						uni.setStorageSync('MerchantTradeNo', res.data.MerchantTradeNo)

						uni.navigateTo({
							url: `/pages/book_now/outward_payment/outward_payment?form=${JSON.stringify(res.data)}&type=2`
						})

						this.show = true
						this.extendEndTime()

						setTimeout(() => {
							this.show = false
							uni.navigateBack()
						}, 5000)

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			confirm_payment4() {
				orderContinuation({
					order_id: this.orderInfo.id,
					order_continuation: this.extendDuration,
					pay_type: 4,
					coupon_id: this.info.id ? this.info.id : '',
					money: this.totalPrice,
					package_id: this.packageInfo ? this.packageInfo.id : ''
				}).then(res => {
					if (res.code == 1) {
						// uni.navigateTo({
						// 	url: `/pages/book_now/outward_payment/outward_payment?url=${res.data}`
						// })
						this.wakeUp(res.data.result)
						// this.wakeUp(res.data)
						this.isLinePay = {
							flag: true,
							info: res.data.pay_log
						}

						this.show = true
						this.extendEndTime()

						setTimeout(() => {
							this.show = false
							uni.navigateBack()
						}, 5000)

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			wakeUp(path) {
				const systemInfo = uni.getSystemInfoSync()
				// #ifdef APP-PLUS
				if (systemInfo.platform === 'Android') {
					const params = {
						pname: 'jp.naver.line.android',
						action: 'line://'
					}
					if (this.determine(params)) {
						// 已下載line pay
						plus.runtime.openURL(path, function() {
							// plus.nativeUI.alert('本機未安裝指定的應用')
						})
					} else {
						plus.runtime.openURL(`market://details?id=${params.pname}`, function() {
							// plus.nativeUI.alert('本機未安裝指定的應用')
						})
					}
				} else if (systemInfo.platform === 'ios') {
					const params = {
						appid: ''
					}
					plus.runtime.launchApplication({
						action: path
					}, function() {
						plus.nativeUI.actionSheet({
							title: '應用市場',
							cancel: '取消',
							buttons: [{
								title: '應用市場'
							}]
						}, function({
							index
						}) {
							switch (index) {
								case 1:
									plus.runtime.openURL(
										`itms-apps://itunes.apple.com`,
										function() {
											// plus.nativeUI.alert('本機未安裝指定的應用')
										})
							}
						})
					})
					// this.determine()
					plus.runtime.openURL(path, function() {
						// plus.nativeUI.alert('本機未安裝指定的應用')
					})
				}
				// #endif

				// #ifdef H5
				// uni.navigateTo({
				// 	url: `/pages/book_now/outward_payment/outward_payment?url=${path}&type=4`
				// })

				const userAgent = navigator.userAgent
				if (/(Android)/i.test(userAgent)) {
					// Android平台
					window.location.href = path
				} else if (/iPhone|iPad|iPod/i.test(userAgent)) {
					// ios平台
					window.location.href = path
				}

				// #endif

			},
			determine() {
				const install = plus.runtime.isApplicationExist()
				return install
			},
			linePayFn() {
				if (this.isLinePay.flag && this.isLinePay.info) {
					uni.showLoading({
						title: '加载中...'
					})
					setTimeout(() => {
						getLinePayInfo({
							...this.isLinePay.info
						}).then(res => {
							console.log(res)
							if (res.code == 1) {
								uni.showToast({
									title: res.msg,
									icon: 'success',
									duration: 6000
								})
								setTimeout(() => {
									uni.reLaunch({
										url: `/pages/order_details/order_details?id=${res.data.id}`
									})
								}, 1500)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 6000
								})
							}
						})
					}, 1000)
				}
			},
			confirm_payment6() {

				if (this.totalPrice > this.userStoreInfo.balance) {
					uni.showToast({
						title: '餘額不足',
						icon: 'none'
					})
					return
				}

				orderContinuation({
					order_id: this.orderInfo.id,
					order_continuation: this.extendDuration,
					pay_type: 6,
					coupon_id: this.info.id ? this.info.id : '',
					money: this.totalPrice,
					package_id: this.packageInfo ? this.packageInfo.id : ''
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						})

						this.show = true
						this.extendEndTime()

						setTimeout(() => {
							this.show = false
							uni.navigateBack()
						}, 5000)

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			confirm_payment7() {
				orderContinuation({
					order_id: this.orderInfo.id,
					order_continuation: this.extendDuration,
					pay_type: 7,
					coupon_id: this.info.id ? this.info.id : '',
					money: this.totalPrice,
					card_id: this.rechargeCardInfo.id,
					package_id: this.packageInfo ? this.packageInfo.id : ''
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						})

						this.show = true
						this.extendEndTime()

						setTimeout(() => {
							this.show = false
							uni.navigateBack()
						}, 5000)

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			confirm_payment8() {
				if (!this.ticketInfo.id) return
				orderContinuation({
					order_id: this.orderInfo.id,
					order_continuation: this.extendDuration,
					pay_type: 8,
					coupon_id: this.info.id ? this.info.id : '',
					// money: this.totalPrice,
					money: 0,
					card_id: this.ticketInfo.id,
					package_id: this.packageInfo ? this.packageInfo.id : ''
				}).then(res => {
					console.log(res, '支付')
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						})

						this.show = true
						this.extendEndTime()

						setTimeout(() => {
							this.show = false
							uni.navigateBack()
						}, 5000)

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			confirm_payment9() {
				orderContinuation({
					order_id: this.orderInfo.id,
					order_continuation: this.extendDuration,
					pay_type: 9,
					coupon_id: this.info.id ? this.info.id : '',
					money: this.totalPrice,
					package_id: this.packageInfo ? this.packageInfo.id : ''
				}).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: `/pages/book_now/outward_payment/outward_payment?AppleForm=${JSON.stringify(res.data)}&type=9`
						})

						this.show = true
						this.extendEndTime()

						setTimeout(() => {
							this.show = false
							uni.navigateBack()
						}, 5000)

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			extendEndTime() {
				let start = new Date(this.orderInfo.end * 1000)
				let month = this.montage(start.getMonth() + 1)
				let date = this.montage(start.getDate())
				let startH = start.getHours()
				let startM = start.getMinutes()
				this.orderExtendStartTime = this.montage(startH) + ":" + this.montage(startM)
				// 時長
				let duration = Number(this.extendDuration.split(':')[0]) * 60 * 60 * 1000 + Number(this.extendDuration
					.split(':')[1]) * 60 * 1000
				let endTime = startH * 60 * 60 * 1000 + startM * 60 * 1000 + duration
				let endH = Math.floor(endTime / 60 / 60 / 1000)
				let endM = Math.floor((endTime % (60 * 60 * 1000)) / 60 / 1000)
				this.orderExtendEndTime = this.montage(endH) + ":" + this.montage(endM)
			},
			setVipRate(rate) {
				if (rate == 0 || rate == 10) {
					return 0
				} else {
					return rate + '折'
				}
			},
			openTicket() {
				this.showTicket = true

				extendUserTicket({
					room_id: this.orderInfo.room_id
				}).then(res => {
					// console.log(res, '電子票券')
					this.ticketList = res.data
				})
			},
			selectTicket(item) {
				if (item.remaining_times <= 0) {
					uni.showToast({
						title: '該票券無法使用',
						icon: 'none'
					})
					return
				}
				if (this.ticketInfo.id !== item.id) {
					this.ticketInfo = item
					let h = Number(item.use_hours.split(':')[0])
					let m = Number(item.use_hours.split(':')[1])
					console.log(m, '分鐘')
					if (!m) {
						this.extendDuration = h + ':00'
						this.value = h + '小時'
					} else {
						this.extendDuration = h + ':' + m
						this.value = h + '小時' + m + '分鐘'
					}

				} else {
					this.ticketInfo = {
						id: null
					}
					this.extendDuration = ''
					this.value = '請選擇延長時間'
				}
				this.computedPrice(0)
				this.ticketText = this.ticketInfo.id ? this.ticketInfo.title : '選擇電子票券'
				this.packageInfo = this.ticketInfo.id ? null : this.packageInfo
				this.radioChecked = this.ticketInfo.id ? '使用電子票券' : '餘額付款'
				this.currentCheck = this.ticketInfo.id ? 1 : 0
				this.value = this.ticketInfo.id ? `電子票券（${this.value}）` : '請選擇延長時間'
			},
			setPayment(arr) {
				arr.forEach(item => {
					switch (item) {
						case 1:
							this.paymentMethod.push({
								value: '信用卡/轉帳 藍新',
								checked: false
							})
							if (this.systemInfo.platform == 'ios' && this.orderInfo.store_id == 76) {
								this.paymentMethod.push({
									value: 'Apple pay',
									checked: false
								})
							}
							break;
						case 2:
							this.paymentMethod.push({
								value: '信用卡/轉帳 綠界',
								checked: false
							})
							break;
						case 4:
							if (this.orderInfo.store_id == 76) {
								this.paymentMethod.push({
									value: 'Line Pay',
									checked: false
								})
							}
							break;
						case 9:
							if (this.orderInfo.store_id == 76) {
								this.paymentMethod.push({
									value: 'Apple pay',
									checked: false
								})
							}
							break;
						case 10:
							if (this.systemInfo.platform == 'Android') {
								this.paymentMethod.push({
									value: 'Google pay',
									checked: false
								})
							}
							break;
					}
				})

			},

			selectPackage(item) {
				if (this.packageInfo) {
					if (this.packageInfo.id == item.id) {
						this.packageInfo = null
					} else {
						this.packageInfo = item
					}
				} else {
					this.packageInfo = item
				}

				this.totalPrice = this.packageInfo ? Number(this.packageInfo.price) : 0
				this.extendDuration = this.packageInfo ? this.packageInfo.duration_hour + ':00' : ''
				this.value = this.packageInfo ? this.packageInfo.duration_hour + '小時' : '請選擇延長時間'
				this.ticketInfo = this.packageInfo ? {
					id: null
				} : this.ticketInfo
				this.ticketText = this.ticketInfo.id ? this.ticketInfo.title : '選擇電子票券'
				this.extendDuration = this.packageInfo ? this.packageInfo.duration_hour + ':00' : ''
			},
		},

	}
</script>

<style lang="less" scoped>
	.container {
		padding: 30rpx;
		box-sizing: border-box;

		.duration {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			justify-content: space-between;

			input,
			.inp {
				width: 490rpx;
				height: 57rpx;
				background: #F3F5F9;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				border: 1rpx solid #707070;
				text-align: center;
			}

			.inp {
				line-height: 57rpx;
				color: #000;
			}

			.declass {
				color: #ccc;
			}

		}

		.scroll_y {
			height: 65vh;
			// background-color: skyblue;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 16rpx;

			.popup_item {

				height: 154rpx;
				width: 100%;
				// background-color: #39B19D;
				background-color: #999;
				border-radius: 16rpx;
				border: 1rpx solid #F3F5F9;
				display: flex;
				margin-bottom: 30rpx;

				.list_left {
					width: 90%;
					height: 100%;
					background: #fff;
					border-radius: 16rpx;

					.top {
						height: 62rpx;
						border-bottom: 1rpx dashed #999;
						// padding-top: 15rpx;
						// box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						position: relative;

						.coupon {
							font-size: 23rpx;
							font-weight: bold;
							margin-left: 44rpx;
							position: relative;

							&:before {
								content: '';
								display: block;
								width: 5rpx;
								height: 18rpx;
								background: linear-gradient(180deg, #00BC64 0%, #39B19D 100%);
								border-radius: 2rpx 2rpx 2rpx 2rpx;
								opacity: 1;
								position: absolute;
								left: -20rpx;
								top: 0;
								margin-top: 9rpx;
							}
						}

						.condition {
							font-size: 22rpx;
							color: #999;
							margin-right: 60rpx;
						}

						&:before {
							content: "";
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: #F3F5F9;
							display: block;
							position: absolute;
							left: 0%;
							bottom: 0%;
							margin-left: -10rpx;
							margin-bottom: -10rpx;
						}

						&::after {
							content: "";
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							// background: #39B19D;
							background: #999;
							display: block;
							position: absolute;
							right: 0%;
							bottom: 0%;
							margin-right: -10rpx;
							margin-bottom: -10rpx;
						}
					}

					.bottom {
						display: flex;
						align-items: flex-end;
						justify-content: space-between;

						.number {
							margin: 20rpx 0 0 34rpx;
							font-size: 38rpx;
							color: #FF6600;
							font-weight: bold;
						}

						.time {
							font-size: 22rpx;
							color: #999;
							margin-right: 50rpx;
						}
					}
				}

				.list_right {
					flex: 1;

					view {
						width: 100%;
						// 設置文本竪向排列
						writing-mode: vertical-lr;
						height: 154rpx;
						color: white;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 23rpx;
						// 設置文字間隔
						letter-spacing: 13rpx;
					}
				}

			}

			.active {
				background-color: #39B19D;
				border: 1rpx solid #39B19D;

				.list_left {
					border-color: #39B19D;

					.top {
						border-color: #39B19D;

						&:before,
						&::after {
							background-color: #39B19D;
						}
					}
				}
			}
		}

		.price {
			display: flex;
			justify-content: space-between;

			text {
				color: #FF6600;
				font-weight: bold;
			}
		}

		.pay_type {
			margin-top: 30rpx;

			.title {
				margin-bottom: 30rpx;
			}

			.radio_box {
				display: flex;
				flex-direction: column;
				padding: 0 67rpx 0 46rpx;
				box-sizing: border-box;
				position: relative;

				label {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 33rpx;

					.label {
						position: relative;


					}

					.active {
						color: #39B19D;
					}
				}

				.balance {
					position: absolute;
					top: 12rpx;
					left: 180rpx;
					font-size: 24rpx;
				}

				.card_text {
					position: absolute;
					bottom: -60rpx;
					left: 46rpx;
					width: 100%;
					// padding: 0;
				}

				.ticket {
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}

				.ticket_text {
					padding: 10rpx 30rpx;
					background-color: #00BC64;
					color: #fff;
					border-radius: 10rpx;
					font-size: 26rpx;
					display: inline-block;
				}

				.ticket_text_inp {
					border: 1rpx solid #ccc;
					// flex: 1;
					padding: 10rpx 30rpx;
					width: 300rpx;
					border-radius: 16rpx;
					text-align: center;
					background: #F3F5F9;
					color: #ccc;
				}

				.active {
					border-color: #000;
					color: #000;
				}
			}
		}

		.card_popup_box {
			// width: 690rpx;
			height: 60vh;
			border-radius: 16rpx;
			background-color: #fff;
			padding: 30rpx;
			box-sizing: border-box;

			.card_item {
				height: 150rpx;
				border-radius: 16rpx;
				border: 1rpx solid #F3F5F9;
				margin-bottom: 30rpx;
				background-color: #F3F5F9;
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					display: flex;
					justify-content: space-between;
				}

				.card_balance {
					font-size: 30rpx;
					display: flex;
					justify-content: space-between;

					text {
						color: #FA533D;
						font-weight: bold;
						margin-left: 10rpx;
					}
				}
			}

			.active {
				background-color: #39B19D;
				color: #fff;
			}
		}

		.confirm_payment {
			width: 476rpx;
			height: 110rpx;
			background: #39B19D;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			font-size: 36rpx;
			line-height: 110rpx;
			text-align: center;
			color: white;
			margin: 197rpx auto;
		}

		.extends_succes {
			width: 600rpx;
			// height: 300rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			box-sizing: border-box;
			text-align: center;

			button {
				background-color: #39B19D;
				color: #fff;
			}

			.title {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 21rpx;
			}

			.extend_time {
				color: #999;
				font-size: 28rpx;
				margin-bottom: 21rpx;
			}
		}
	}

	.select_package_title {
		font-size: 28rpx;
		margin: 30rpx 25rpx 10rpx;
		color: #000;
		background-color: #FA533D;
		padding: 5rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 30rpx;
		}
	}

	.select_package {
		padding: 0 25rpx;
		max-height: 220rpx;
		overflow: hidden;
		overflow-y: scroll;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.select_package_item {
			// width: 628rpx;
			width: 45%;
			height: 57rpx;
			background: #F3F5F9;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			border: 1rpx solid #707070;
			padding: 0 15rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 11rpx;
		}

		.active {
			background: #E4E5F8;

			text {
				color: #1C36CD;
			}

			.member_price {
				color: #FA533D;
			}
		}
	}
</style>